import { Menu, MenuProps } from 'antd';
import styles from './index.less';
import { Outlet, history, useLocation } from '@umijs/max';
import { useEffect, useState } from 'react';
import { items } from './const';

const Render = () => {
    const location = useLocation()
    const [openKey, setOpenKey] = useState<any>()

    useEffect(() => {
            const openItem = items.find((item) => item.children?.find((child: any) => child.key === location.pathname))
            setOpenKey(openItem?.key)
    }, [location])
    return (
        <>
            {
                openKey && <Wrapper openKey={openKey} />
            }
        </>
    )
}
const Wrapper = ({openKey}) => {
    const onClick = ({key}) => {
        history.push(key)        
    }
    const location = useLocation()
    const [menuKey, setMenuKey] = useState<any>('order')
    useEffect(() => {
        if (location.pathname) {
            setMenuKey(location.pathname)
        }
    }, [location])

    return (
        <div className={styles.page}>
            <Menu
                onClick={onClick}
                style={{ width: 150 }}
                selectedKeys={[menuKey]}
                defaultOpenKeys={[openKey]}
                mode="inline"
                items={items}
                onSelect={({key}) => {
                    setMenuKey(key)
                }}
                />
            <div className={styles.content}>
                <Outlet />
            </div>
        </div>
    )
}

export default Render;